import React, { FC } from 'react'
import { View, Image } from 'react-native'
import Swiper from 'react-native-swiper'
import { observer } from 'mobx-react'
import list from '../../../store/list'

import styles from './styleCookbook'
import useFetchData from '../../../hooks/useFetchData'

type Props = {
}

const MySwiper:FC<Props> = (props) => {
  // const { list } = useFetchData('http://localhost:9000/list')  

  return (
    <View style={styles.wrapper}>
      <Swiper showsButtons={false}>
        {
          list.swiperList.map((li) => (
            <View style={styles.slide} key={li.id}>
              <Image source={{uri: li.img}} style={styles.swiperImg}></Image>
            </View>
          ))
        }
      </Swiper>
    </View>
  )
}

export default observer(MySwiper)